<script setup>
import {ref} from "vue"
import Nav from "../components/Nav.vue"
import Header from "../components/Header.vue"

const showLalbe = ref("message")
const HomeColor = ref("#2d353b")
// 获取子组件nav传递切换标签,修改chatRoom的显示内用
const getNavChangeLabel = (labelName)=>{
  // 根据labelName,传递给ChatRoom组件,更改container-left的显示内容
  // console.log("home获取的lableName", labelName);
  // 此处el-main中传递值
  showLalbe.value = labelName
}

// 获取heaer组件的传递值,修改nav组件中的背景颜色
const chageHeaderColor = (colorValue)=> {
  console.log("hedear调用home的函数",colorValue);
  HomeColor.value = colorValue
}

</script>

<template>
    <div class="home">
        <el-container class="home-container">
          <el-header><Header @changePorjectCorlor="chageHeaderColor"/></el-header>
          <el-container class="aside-main-wrapper">
              <el-aside width="100px"><Nav @changeLabel="getNavChangeLabel" :colorValue="HomeColor"></Nav></el-aside>
              <el-main>
                <router-view :showLabelValue="showLalbe" />
              </el-main>
          </el-container>
      </el-container>
  </div>
</template>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .home-container{
    width: 100%;
    height: 100%;
    .el-header {
      padding: 0px;
      height: 50px;
    }
    .aside-main-wrapper {
      height: calc(100% - 50px);
      .el-main{
        padding: 0px;
      }
      .el-aside {
        height: 100%;
        overflow: hidden;
        width: 80px;
      }
    }
    
  }
}
</style>